<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../css/yljc.css" rel="stylesheet">
</head>
<body>
<div class="dplist_outer">
    <div class="dplist_nav">
        当前位置 > 大棚管理 > <span class="color_green">叶龄检查</span>
    </div>
    <div class="layui-row">
        <div class="yljc_left">
            <div class="yljc_kd">
                <div class="yljc_kd_inner">
                    <div class="click_video1"></div>
                    <div class="click_video2"></div>
                    <div class="click_video3"></div>
                    <div class="yljc_kdc">
                        <span class="kd_cut"><img src="../images/kd_add.png" ondragstart="return false;"></span>
                        <span class="kd_add"><img src="../images/kd_cut.png" ondragstart="return false;"></span>
                        <div class="kd_bottom">
                            <div class="kd_tj">
                                <div class="yl_tip">
                                    <i class="yl_num">0</i>cm
                                </div>
                                <div class="yljc_zz"></div>
                                <img src="../images/kd_tj.png" ondragstart="return false;">
                            </div>
                            <img src="../images/kd_bottom.png" ondragstart="return false;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="yljc_wd">
            <span>
                <img src="../images/yl_wd.png">
                        <b>20c</b>
                        <i>空气温度</i>
                    </span>
                <span>
                     <img src="../images/yl_sd.png">
                        <b>20</b>
                        <i>空气湿度</i>
                    </span>
                <span>
                     <img src="../images/yl_gcwd.png">
                        <span class="dp_ts">
                            提示18-20
                        </span>
                        <b>24</b>
                        <i>冠层下<br> 空气温度</i>
                    </span>
                <span>
                     <img src="../images/yl_gcsd.png">
                        <b>13-18</b>
                        <i>冠层下 <br>空气湿度</i>
                    </span>
                <span>
                     <img src="../images/yl_nd.png">
                        <b>13-18</b>
                        <i>泥度</i>
                    </span>
                <span>
                     <img src="../images/yl_sw.png">
                        <b>50mm</b>
                        <i>水位</i>
                    </span>
                <span>
                     <img src="../images/yl_gzd.png">
                        <b>10lux</b>
                        <i>光照度</i>
                    </span>
            </div>
        </div>
        <div class="yljc_right">
            <div class="yljcd">
                <div class="rotate">
                    <div class="dp_video">
                        <video id="videoPlay" src="" controls="controls"></video>
                    </div>
                    <div class="rotate_button_outer">
                        <div class="dp_title">
                            叶龄监测点
                        </div>
                        <div class="rotate_button">
                            <div class="rotate_btn">
                                <span class="rotate_btns rotate_btn_1"></span>
                                <span class="rotate_btns rotate_btn_2"></span>
                                <span class="rotate_btns rotate_btn_3"></span>
                                <span class="rotate_btns rotate_btn_4"></span>
                                <span class="rotate_btns rotate_btn_5"></span>
                                <span class="rotate_btns rotate_btn_6"></span>
                                <span class="rotate_btns rotate_btn_7"></span>
                                <span class="rotate_btns rotate_btn_8"></span>
                                <img class="rotate_btn_img" src="../images/control-0.png" ondragstart="return false;">
                            </div>
                            <div class="add_cut">
                                <i class="add_btn">
                                    <img class="add_click_btn" src="../images/add.png">
                                </i>
                                <i class="cut_btn">
                                    <img class="cut_click_btn" src="../images/cut.png">
                                </i>
                            </div>
                            <p>Zoom</p>
                            <div class="rotate_full">
                                <img src="../images/full.png">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="yljc_carousel">
                <div class="layui-carousel yljc_height" id="test1"  lay-filter="test1" >
                    <div carousel-item>
                        <div>图片1<img src=""></div>
                        <div>图片2<img src=""></div>
                        <div>图片3<img src=""></div>
                        <div>图片4<img src=""></div>
                        <div>图片5<img src=""></div>
                    </div>
                </div>
                <p class="yljc_txt">叶龄：第三叶</p>
                <p class="yljc_data">日期：2019/04/22 – 2019/04/25</p>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['carousel'], function(){
		var carousel = layui.carousel;
        //建造实例
        var options={ elem: '#test1'
			,width: '100%' //设置容器宽度
			,arrow: 'always', //始终显示箭头
			height:'256px',
			autoplay:true ,   //是否自动切换
			interval:3000,    //轮播滚动间隔时间
			indicator:'none'}

        var ins=carousel.render(options);

        //监听轮播切换事件
        carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            console.log(obj.index); //当前条目的索引
            console.log(obj.prevIndex); //上一个条目的索引
            console.log(obj.item); //当前条目的元素对象
        });

        $(function () {
			//重置轮播
			/*ins.reload(options);*/

            //创建小方块的jquery对象
            var $box = $(".kd_tj");
            //创建小方块的鼠标点按下事件
            $box.mousedown(function (event) {
                //获取鼠标按下的时候左侧偏移量和上侧偏移量
                var old_top = event.pageY;//竖直偏移量
                //获取鼠标的位置
                var old_position_top = $(this).position().top;
                //鼠标移动
                $(document).mousemove(function (event) {
                    var new_top = event.pageY;//新的鼠标竖直方向上的偏移量
                    //计算发生改变的偏移量是多少
                    var change_y = new_top - old_top;
                    //计算出现在的位置是多少
                    var new_position_top = old_position_top + change_y;
                    //加上边界限制
                    if(new_position_top<0){//当上边的偏移量小于0的时候，就是上边的临界点，就让新的位置为0
                        new_position_top=0;
                    }
                    if(new_position_top>=295){//当上边的偏移量小于0的时候，就是上边的临界点，就让新的位置为0
                        new_position_top=295;
                    }
                    //如果向下的偏移量大于文档对象的高度减去自身的高度，就让它等于这个高度
                    if(new_position_top>$(document).height()-$box.height()){
                        new_position_top=$(document).height()-$box.height();
                    }
                    console.log(11,new_position_top)
                    $box.css({
                        top: new_position_top + 'px'
                    });
                    compentNum(new_position_top)
                });
                $box.mouseup(function(){
                    $(document).off("mousemove");
                })
            });
            //计算显示厘米
            function compentNum(top){
                var newNum=100-Math.floor(top/2.95);  //获取刻度数值
                $('.yl_num').text(newNum)
            }
            //点击刻度上的加号
            $('.kd_add').click(function () {
                var nowheight=parseInt($(".kd_tj").css('top'));
                var newnum=parseInt($('.yl_num').text())+1;
                if(newnum<=100){
                    $(".kd_tj").css({
                        top: nowheight-2.95 + 'px'
                    });
                    console.log(11,newnum ) //获取刻度值
                    $('.yl_num').text(parseInt(newnum))
                }

            })

            //点击刻度上的减号
            $('.kd_cut').click(function () {
                var nowheight=parseInt($(".kd_tj").css('top'));
                var newnum=$('.yl_num').text()-1;
                if(newnum>=0){
                    $(".kd_tj").css({
                        top: nowheight+2.95 + 'px'
                    });
                    console.log(11,newnum)  //获取刻度值
                    $('.yl_num').text(parseInt(newnum))
                }

            })
            //视频全屏方法
            $('.rotate_full').on('click',function(){
                FullScreen();
            });
            function FullScreen() {
                var ele = document.getElementById('videoPlay');   //获取视频元素
                if (ele .requestFullscreen) {
                    ele .requestFullscreen();
                } else if (ele .mozRequestFullScreen) {
                    ele .mozRequestFullScreen();
                } else if (ele .webkitRequestFullScreen) {
                    ele .webkitRequestFullScreen();
                } else if(ele.msRequestFullscreen ){
                    ele.msRequestFullscreen()
                }
            }

            //旋转按钮8八个方向点击事件
            $('.rotate_btn .rotate_btns').each(function (i,dom) {
                $(this).click(function () {
                    console.log(i+1)        //点击第几个按钮位置
                    $('.rotate_btn_img').attr('src','../images/control-'+(i+1)+'.png')   //点击切换背景图片
                })
            })

            /*点击加减号*/
            $(".add_click_btn").mousedown(function () {
                $(this).attr('src','../images/addl.png')
            })
            $(".add_click_btn").mouseup(function () {
                $(this).attr('src','../images/add.png')
            })
            $(".cut_click_btn").mousedown(function () {
                $(this).attr('src','../images/cutl.png')
            })
            $(".cut_click_btn").mouseup(function () {
                $(this).attr('src','../images/cut.png')
            })
        })
	});

</script>
</html>